<!--
@ 作者: 阿拉丁矿工 黄传鸿 <hchhyzc@foxmail.com>
-->
<template>
  <div class="right_block">
    <text>预览块:{{ selectedBlock.label }}</text>
    <svg
      class="h_svg_icon"
      xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
      version="1.1"
      width="100%"
      height="250px"
      viewBox="0 0 1024 1024"
      v-html="selectedBlock.val"
    ></svg>
    <n-button @click="onSelectedBlock()"> 绘制当前块 </n-button>
    <n-divider title-placement="left">数据</n-divider>
    <n-input class="block_info" type="textarea" v-model:value="selectedBlock.val" />
  </div>
</template>

<script setup lang="ts">
/* ================================================================================================ */
// 🍀引入
/* ================================================================================================ */
import { reactive, ref, toRefs, computed, watch, nextTick, onMounted } from "vue";

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 引入存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import { useMenuStore } from "@/store/menuStore"; // 菜单
import { useCanvasStore } from "@/store/canvasStore"; // 画布

/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
// 🐸 使用存储
/**~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
const menuStore = useMenuStore(); // 菜单
const canvasStore = useCanvasStore(); // 画布

/* ================================================================================================ */
//                                 ★ 变量
/* ================================================================================================ */

/** 选择的块*/
let selectedBlock = computed(() => canvasStore.selectedBlock);

/** 选择块 */
const onSelectedBlock = () => {
 // console.log("选择块")
  menuStore.menuHandle("divBlock");
 // console.log(canvasStore.selectedBlock.val)
};
</script>

<style lang="scss" scoped>
/* 引入共用css */
@import "@/assets/h.scss";
.right_block {
  user-select: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  
}

.block_info {
  height: 100%;
  overflow: auto;
}

.block_preview_box {
  border: 2px solid rgb(0, 0, 255);
}
</style>
